<template>
  <div>
      <el-container>
        <el-header height='50px' style="text-align:left;line-height: 40px">
          <div style="color: #20a0ff">基本数据</div>
        </el-header>
        <el-main style="line-height: 80px">
          <el-col :span="6" v-for="(value, key) in basicData"  :offset="0" >
            <el-card class="box-card">
              <div style="margin-left:1px;font-size: 22px;height: 40px; ">{{ basicDataName[key] }}</div>
              <div style="margin-left:1px;font-size: 18px;height: 40px; margin-bottom:20px;">{{ value }}</div>
            </el-card>
          </el-col>
        </el-main>
      </el-container>
      <el-container>
        <span style="color: #20a0ff;text-align:left;line-height: 5px;margin-left: 20px">重点高校</span>
        <el-header height='30px' style="text-align:right">
          <div style="line-height: 10px;margin-right:20px">
            <el-link @click="allSchool" target="_blank" style="margin-right:80px;color: #20a0ff">查看更多>></el-link>
          </div>
          <div style="color: #B2B4B6;text-align:left;height: 25px">根据高校的评测量、用户活跃度、好评率进行排名</div>
        </el-header>
        <el-main >
        </el-main>
      </el-container>
      <el-container>
        <el-row style="width: 100%;margin-left: 30px">
          <el-col :span="6" v-for="(item) in this.keyUniversity" :key="item.classId" :offset="0" >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{item["name"]}}</span>
              </div>
              <div style="height: 30px">
                <span>地区：  {{item["provinve"]}}省 {{item["city"]}}市</span>
              </div>
              <div style="height: 30px">
                <span>活跃人数:&nbsp&nbsp</span>
                <span style="color: #20a0ff">{{item["activePeople"]}}万(活跃) / </span>
                <span>{{item["basePeople"]}}万(基数)</span>
              </div>
              <div style="height: 30px">
                <span>负责人：  {{item["director"]}}</span>
              </div>
              <div style="height: 30px">
                <span>评测：  0{{item["evaNum"]}}人次</span>
              </div>
<!--              <div style="height: 25px">-->
<!--                <span>好评率：{{item["praise"]}}%</span>-->
<!--              </div>-->
<!--              <div style="height: 25px">-->
<!--                <i class="fa fa-star-o"></i>-->
<!--                <span >{{item["star"]}}</span>-->
<!--              </div>-->
              <div style="height: 30px">
                <el-link style="color: #20a0ff" @click="click1(item.name)">查看详情</el-link>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-container>
      <el-container>
        <el-header height='50px' style="text-align:left">
          <div style="color: #20a0ff;text-align:left;height: 25px">数据分析</div>
          <div style="color: #B2B4B6;text-align:left;height: 25px">通过评测结果维度和全国高校评测人次维度来监控查看</div>
        </el-header>
        <el-container>
<!--        <el-main >-->
<!--          <el-header height='50px' style="text-align:left">-->
<!--          </el-header>-->
<!--          <div class="pie" style="margin-left: 130px">-->
<!--            <div id="pie1" align="center">-->
<!--              &lt;!&ndash; 为 ECharts 准备一个具备大小（宽高）的 DOM &ndash;&gt;-->
<!--              <div id="main1" style="width:500px;height: 300px"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-main>-->
<!--        <el-main >-->
<!--          <el-header height='50px' style="text-align:left">-->
<!--          </el-header>-->
<!--          <div class="radar">-->
<!--            <div id="radar1">-->
<!--              &lt;!&ndash; 为 ECharts 准备一个具备大小（宽高）的 DOM &ndash;&gt;-->
<!--              <div id="main3" style="float:right;width:370px;height: 300px"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-main>-->
        </el-container>
      </el-container>
      <el-container>
        <el-container>
          <el-main >
            <el-header height='50px' style="text-align:left">
            </el-header>
            <div class="pie" style="margin-left: 130px">
              <div id="pie1" align="center">
                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                <div id="main1" style="width:500px;height: 300px"></div>
              </div>
            </div>
          </el-main>
<!--        <el-main>-->
<!--        <div class="bar">-->
<!--          <div id="bar1">-->
<!--            &lt;!&ndash; 为 ECharts 准备一个具备大小（宽高）的 DOM &ndash;&gt;-->
<!--            <div id="main2" style="float:left;width:100%;height: 300px"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--        </el-main>-->
        <el-aside width="380px" style="line-height: 50px">
          <el-header height='50px' style="text-align:left">
          </el-header>
          <div>
          <el-table
            :data="coverRank"
            stripe
            style="width: 100%">
            <el-table-column
              prop="id"
              label="排名"
              width="50">
            </el-table-column>
            <el-table-column
              prop="name"
              label="高校名称"
              width="120">
            </el-table-column>
            <el-table-column
              prop="totalNum"
              label="总人数(万)"
              width="90">
            </el-table-column>
            <el-table-column
              prop="activeNum"
              label="活跃人数占比" width="120">
            </el-table-column>
          </el-table>
          </div>
        </el-aside>
        </el-container>
      </el-container>
  </div>
</template>

<script>

    export default {
        name: "schoolOperation",
        data() {
            return {
                basicData:{},//基本数据
                basicDataName:{"schoolNum":"学校总数","userNum":"用户总数","evaNum":"评测次数","consultTime":"咨询总时长"},
                keyUniversity:{},//重点高校
                satisfaction:[],//饼图满意度
                timeGraph:{},//时间分布柱形图
                radar:{},//心理指标雷达图
                coverRank:[]//图表数据
            };
        },
        //坑!!! 在created中请求的数据由于存在时间问题，所以可能还没请求结束，就渲染界面，导致图形没有数据，解决方法是使用watch
        watch:{
            satisfaction() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initPieEcharts();

                })
            },
            timeGraph() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initBarEcharts();

                })
            },
            radar() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initRadarEcharts();
                })
            },

        },
         created() {
            this.initData();
        },
         mounted() {
            //this.initPieEcharts();
            // this.initBarEcharts();
            // this.initRadarEcharts();
            // this.initData();
            //  console.log("mounted:",this.satisfaction)
        },
        methods: {
            initData(){
                var allData
                 this.$axios.post("managementSystem/operation/initial")
                    .then(data => {
                            if (data.status != 200) {
                                this.$message.error('服务出错'+data.status);
                                // this.$message(fgf{
                                //   message:'服务错误',
                                //   type:'warn'
                                // });
                            } else {
                                if (data.data.errorCode == '200') {
                                    allData = data.data
                                    console.log(allData.errorMsg)

                                    //basicData部分初始化
                                    this.basicData=allData.basicData
                                    // this.basicData={"schoolNum":100,"userNum":200,"evaNum":500,"consultTime":1000};
                                    this.basicData["schoolNum"]=this.basicData["schoolNum"].toString()+"所"
                                    this.basicData["userNum"]=this.basicData["userNum"].toString()+"人"
                                    this.basicData["evaNum"]=this.basicData["evaNum"].toString()+"人次"
                                    if(this.basicData["consultTime"]==null){
                                        this.basicData["consultTime"]="0小时"

                                    }else {
                                        this.basicData["consultTime"] = this.basicData["consultTime"].toString() + "小时"
                                    }

                                    //keyUniversity部分初始化
                                    this.keyUniversity=allData.keyUniversity
                                    // this.keyUniversity=[{"province":"湖北","city":"武汉","name":"华中科技大学","activePeople":2,"basePeople":4,"director":"李元元","evaNum":100,"praise":98,"star":4.8},
                                    //     {"province":"湖北","city":"武汉","name":"华中科技大学","activePeople":2,"basePeople":4,"director":"李元元","evaNum":100,"praise":98,"star":4.8},
                                    //     {"province":"湖北","city":"武汉","name":"华中科技大学","activePeople":2,"basePeople":4,"director":"李元元","evaNum":100,"praise":98,"star":4.8},
                                    //     {"province":"湖北","city":"武汉","name":"华中科技大学","activePeople":2,"basePeople":4,"director":"李元元","evaNum":100,"praise":98,"star":4.8},]

                                    //满意度饼图数据初始化
                                    this.satisfaction=[
                                        {value:335, name:'一星评价'},
                                        {value:310, name:'二星评价'},
                                        {value:234, name:'三星评价'},
                                        {value:135, name:'四星评价'},
                                        {value:1548, name:'五星评价'}
                                    ]
                                    //柱形图数据初始化
                                    // var d=allData.timeGraph
                                    var d=[
                                        {"depress":10,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                                        {"depress":20,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                                        {"depress":5,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                                        {"depress":1,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                                        {"depress":6,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                                        {"depress":0,"anxiety":0,"suicide":0,"insomnia":0,"others":0},
                                    ];
                                    this.timeGraph={"depress":[],"anxiety":[],"suicide":[],"insomnia":[],"others":[]}
                                    console.log(this.timeGraph)
                                    for(var i=0;i<d.length;i++) {
                                        this.timeGraph["depress"].push(d[i]["depress"])
                                        this.timeGraph["anxiety"].push(d[i]["anxiety"])
                                        this.timeGraph["suicide"].push(d[i]["suicide"])
                                        this.timeGraph["insomnia"].push(d[i]["insomnia"])
                                        this.timeGraph["others"].push(d[i]["other"])
                                    }

                                    //雷达图数据初始化
                                    this.radar={"18":[],"19":[],"20":[]}
                                    var radarName=["18","19","20"]
                                    // var l=allData.radar
                                    var l=[{"depress":30,"anxiety":20,"suicide":30,"insomnia":20,"others":20},
                                        {"depress":20,"anxiety":15,"suicide":20,"insomnia":40,"others":20},
                                        {"depress":30,"anxiety":10,"suicide":30,"insomnia":10,"others":30}
                                    ]
                                    for(i=0;i<l.length;i++) {
                                        this.radar[radarName[i]].push(l[i]["depress"])
                                        this.radar[radarName[i]].push(l[i]["anxiety"])
                                        this.radar[radarName[i]].push(l[i]["suicide"])
                                        this.radar[radarName[i]].push(l[i]["insomnia"])
                                        this.radar[radarName[i]].push(l[i]["others"])
                                    }

                                    //表格数据初始化
                                    var m=allData.activeRank
                                    // this.coverRank=[{"name":"北京大学","totalNum":61256,"activeNum":88},
                                    //     {"name":"华中科技大学","totalNum":51120,"activeNum":50},
                                    //     {"name":"天津大学","totalNum":45208,"activeNum":35},
                                    //     {"name":"清华大学","totalNum":67828,"activeNum":10}
                                    // ];
                                    for (i=0;i<5;i++) {
                                        this.coverRank.push(allData.activeRank[i])
                                        this.coverRank[i]["id"]=parseInt(i)+1;
                                        console.log(this.coverRank[i]["activeNum"])
                                        this.coverRank[i]["activeNum"]=this.coverRank[i]["activeNum"].toString()+"%";

                                    }

                                }
                            }
                    })
                //basicData部分初始化
                // this.basicData={"schoolNum":100,"userNum":200,"evaNum":500,"consultTime":1000};
                // this.basicData["schoolNum"]=this.basicData["schoolNum"].toString()+"所"
                // this.basicData["userNum"]=this.basicData["userNum"].toString()+"人"
                // this.basicData["evaNum"]=this.basicData["evaNum"].toString()+"人次"
                // this.basicData["consultTime"]=this.basicData["consultTime"].toString()+"小时"
                // //keyUniversity部分初始化
                // this.keyUniversity=[{"province":"湖北","city":"武汉","name":"华中科技大学","activePeople":2,"basePeople":4,"director":"李元元","evaNum":100,"praise":98,"star":4.8},
                //     {"province":"湖北","city":"武汉","name":"华中科技大学","activePeople":2,"basePeople":4,"director":"李元元","evaNum":100,"praise":98,"star":4.8},
                //     {"province":"湖北","city":"武汉","name":"华中科技大学","activePeople":2,"basePeople":4,"director":"李元元","evaNum":100,"praise":98,"star":4.8},
                //     {"province":"湖北","city":"武汉","name":"华中科技大学","activePeople":2,"basePeople":4,"director":"李元元","evaNum":100,"praise":98,"star":4.8},]
                //
                // //饼图数据初始化
                // this.satisfaction=[
                //     {value:335, name:'一星评价'},
                //     {value:310, name:'二星评价'},
                //     {value:234, name:'三星评价'},
                //     {value:135, name:'四星评价'},
                //     {value:1548, name:'五星评价'}
                // ]
                //
                // //柱形图数据初始化
                // var d=[
                //     {"depress":10,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                //     {"depress":20,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                //     {"depress":5,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                //     {"depress":1,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                //     {"depress":6,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                //     {"depress":0,"anxiety":0,"suicide":0,"insomnia":0,"others":0},
                // ];
                // this.timeGraph={"depress":[],"anxiety":[],"suicide":[],"insomnia":[],"others":[]}
                // console.log(this.timeGraph)
                // for(var i=0;i<d.length;i++) {
                //     this.timeGraph["depress"].push(d[i]["depress"])
                //     this.timeGraph["anxiety"].push(d[i]["anxiety"])
                //     this.timeGraph["suicide"].push(d[i]["suicide"])
                //     this.timeGraph["insomnia"].push(d[i]["insomnia"])
                //     this.timeGraph["others"].push(d[i]["others"])
                // }
                //
                // //雷达图数据初始化
                // this.radar={"18":[],"19":[],"20":[]}
                // var radarName=["18","19","20"]
                // var l=[{"depress":30,"anxiety":20,"suicide":30,"insomnia":20,"others":20},
                //     {"depress":20,"anxiety":15,"suicide":20,"insomnia":40,"others":20},
                //     {"depress":30,"anxiety":10,"suicide":30,"insomnia":10,"others":30}
                // ]
                // for(i=0;i<l.length;i++) {
                //     this.radar[radarName[i]].push(l[i]["depress"])
                //     this.radar[radarName[i]].push(l[i]["anxiety"])
                //     this.radar[radarName[i]].push(l[i]["suicide"])
                //     this.radar[radarName[i]].push(l[i]["insomnia"])
                //     this.radar[radarName[i]].push(l[i]["others"])
                // }
                // console.log("radar:",this.radar)
                //
                // //表格数据初始化
                // this.coverRank=[{"name":"北京大学","totalNum":61256,"activeNum":88},
                //     {"name":"华中科技大学","totalNum":51120,"activeNum":50},
                //     {"name":"天津大学","totalNum":45208,"activeNum":35},
                //     {"name":"清华大学","totalNum":67828,"activeNum":10}
                // ];
                // for (var i in this.coverRank) {
                //     this.coverRank[i]["id"]=parseInt(i)+1;
                //     console.log(this.coverRank[i]["activeNum"])
                //     this.coverRank[i]["activeNum"]=this.coverRank[i]["activeNum"].toString()+"%";
                //
                // }
            },
            initPieEcharts(){
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = this.$echarts.init(document.getElementById('main1'));
                    // 绘制图表
                    myChart.setOption({
                        title : {
                            text: '用户使用系统满意度分布',//主标题
                            x:'center',//x轴方向对齐方式
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            bottom: 'bottom',
                            data: ['一星评价','二星评价','三星评价','四星评价','五星评价']
                        },
                        series : [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:this.satisfaction,
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine: {show: true}
                                },
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                },
            initBarEcharts(){
                // 实例化echarts对象
                let myChartDrawer = this.$echarts.init(document.getElementById('main2'))

                // 绘制条形图
                var option = {
                    title: {
                        text: '用户评测结果分布',
                        x:'center',//x轴方向对齐方式
                    },
                    legend: {
                        data: ['抑郁', '焦虑',"失眠","自杀","其他"],
                        top: 30
                    },
                    // X轴
                    xAxis: {
                        data: [
                            '0:00-4:00', '4:00-8:00', '8:00-12:00', '12:00-16:00', '16:00-20:00', '20:00-24:00'
                        ]
                    },
                    // Y轴
                    yAxis: {},
                    // 数据
                    series: [
                        {
                            name: '抑郁',
                            type: 'bar',
                            data: this.timeGraph["depress"]
                        },
                        {
                            name: '焦虑',
                            type: 'bar',
                            data: this.timeGraph["anxiety"]
                        },
                        {
                            name: '失眠',
                            type: 'bar',
                            data: this.timeGraph["suicide"]
                        },
                        {
                            name: '自杀',
                            type: 'bar',
                            data: this.timeGraph["insomnia"]
                        },
                        {
                            name: '其他',
                            type: 'bar',
                            data: this.timeGraph["others"]
                        },
                    ]
                };

                myChartDrawer.setOption(option);
            },
            initRadarEcharts(){
                let myChartDrawer = this.$echarts.init(document.getElementById('main3'))
                let option = {
                    title: {
                        text: '评测结果心理指标雷达图',
                        x:'center',//x轴方向对齐方式
                    },
                    tooltip: {},
                    legend: {
                        orient: 'vertical',
                        bottom: 'bottom',
                        data: ['18', '19','20']
                    },
                    radar: {
                        // shape: 'circle',
                        center: ['50%', '57%'],//调位置
                        radius: 90,//调大小
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(131,141,158,.1)',
                            },
                        },
                        indicator: [{
                            name: '抑郁',
                            max:40
                        },
                            {
                                name: '焦虑',
                                max:40
                            },
                            {
                                name: '自杀',
                                max:40
                            },
                            {
                                name: '失眠',
                                max:40
                            },
                            {
                                name: '其他',
                                max:40
                            },
                        ],
                        splitArea: {
                            show: false,
                            areaStyle: {
                                color: 'rgba(255,0,0,0)', // 图表背景的颜色
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: 'rgba(131,141,158,.1)', // 设置网格的颜色
                            },
                        },
                    },
                    series: [{
                        name: '雷达图',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data: [{
                            value: this.radar["18"],
                            name: '18',
                            itemStyle: {
                                normal: {
                                    color: '#5B8FF9',
                                    lineStyle: {
                                        color: '#5AD8A6',
                                    },
                                },
                            },
                        },
                            {
                                value: this.radar["19"],
                                name: '19',
                                itemStyle: {
                                    normal: {
                                        color: '#5AD8A6',
                                        lineStyle: {
                                            width: 1,
                                            color: 'rgba(60,135,213,.3)',
                                        },
                                    },
                                },
                            },
                            {
                                value: this.radar["20"],
                                name: '20',
                                itemStyle: {
                                    normal: {
                                        color: '#BA55D3',
                                        lineStyle: {
                                            width: 1,
                                            color: 'rgba(60,135,213,.3)',
                                        },
                                    },
                                },
                            }
                        ]
                    }]
                };
                myChartDrawer.setOption(option);
            },
            allSchool(){
                this.$router.push("/home/allSchool");
            },
            click1(val){
                console.log("要跳转的学校名字:"+val)
                this.$router.push({path:"/home/schoolOperationData",query:{universityName:val}});
            }
        }
    }
</script>

<style>

</style>
